<template>
  <div class="product" @click="toDetails">
    <div>
      <div class="product-image">
        <img class="image" :src="info.mainImg" alt="">
      </div>
      <div class="title">
        <t-platform class="type" :type="info.channel"></t-platform>
        {{ info.subject }}
      </div>
    </div>
    <span class="price">{{ currencySymbol }} {{ info.price }}</span>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import TPlatform from "@/components/t-platform";
export default {
  name: "product",
  components: { TPlatform },
  props: {
    info: Object,
    currencySymbol: String
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo,
    })
  },
  methods: {
    toDetails() {
      const query = {
        id: this.info.spuNo,
        channel: this.info.channel
      }
      if (this.userInfo.inviteCode) {
        query.inviteCode = this.userInfo.inviteCode
      }
      let toUrl = this.$router.resolve({
        path: '/goods/details',
        query
      });
      window.open(toUrl.href);
    }
  }
}
</script>

<style scoped lang="less">
.product {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  padding: 10px;
  border-radius: 4px;

  &:hover {
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
  }

  .product-image {
    display: block;
    width: 100%;
    height: 210px;
    border-radius: 4px;
    overflow: hidden;

    .image {
      width: 100%;
      max-height: 100%;
    }
  }

  .title {
    margin-top: 8px;
    color: @t-title-color;
    font-size: 14px;
    cursor: pointer;
    white-space: pre-line;
    /*允许换行*/
    overflow: hidden;
    text-overflow: ellipsis;
    /*省略号*/
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /*行向垂直排列*/
    -webkit-line-clamp: 2; //*限制2

    &:hover {
      color: @primary-color
    }

    .type {
      display: inline-block;
      vertical-align: top;

      :deep(.icon-image) {}
    }
  }

  .price {
    display: block;
    margin-top: 8px;
    margin-bottom: 2px;
    color: @t-title-color;
    font-size: 18px;
    font-weight: 700;
  }
}
</style>